<template>
<div class="bgColor">
    <div class="rowBackground">
        <el-card class="box-card">
        <el-row>
            <el-col :span="12">
                <!-- <el-image :src="require('../../../img/case/pkq.gif')"></el-image> -->
                <el-image :src="require('../../../junM/img/loginbackground.png')"></el-image>
                <br><br>
            </el-col>
            <el-col :span="12">
                <div class="login-container"> 
                    <el-form :model="ruleForm2" :rules="rules2" status-icon ref="ruleForm2" label-position="left" label-width="80px" class="login-page">
                        <el-tabs v-model="activeName" label="this.$store.state.activeName"><br>
                            <el-tab-pane label="用户登录" name="first">
                                <el-form-item prop="phonenumber" label="用户名：">
                                    <el-input type="text" 
                                        v-model="ruleForm2.phonenumber" 
                                        placeholder="用户名"
                                        style="outline: none"
                                    ></el-input>
                                </el-form-item>
                                    <el-form-item prop="password" label="密码：" clear>
                                        <el-input type="password" 
                                            v-model="ruleForm2.password" 
                                            placeholder="密码"
                                            show-password=true
                                        ></el-input>
                                    </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" round style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
                                </el-form-item>
                            </el-tab-pane>
                            <el-tab-pane label="用户注册" name="second">
                                <register></register>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form>                
                </div>
            </el-col>
            <router-view></router-view>
        </el-row>
        </el-card>
    </div>
</div>
</template>
<script>
import Register from '../register/register.vue'
import axios from 'axios'
export default {
 data(){
     var checkPassWord = (rule,value,callback) =>{
         if(!value){
             return callback(new Error('密码不能为空'));
         }else{
             callback()
         }
     }
        return {
            activeName: 'first',
            logining: false,
            ruleForm2: {
                phonenumber: '',
                password: '',
            },
            rules2: {
                phonenumber: [
                    {required: true, message: '不能为空', trigger: 'blur'}],
                password: [
                    {required: true,validator:checkPassWord,trigger:'blur'},
                    ]
            },
            checked: false
        }
    },
    methods: {
        handleSubmit(){
            this.$refs['ruleForm2'].validate(valid=>{
                if(valid){
                    axios.get("/member/queryByPhoneNumberPassWord",{params:{
                        phoneNumber:this.ruleForm2.phonenumber,
                        passWord:this.ruleForm2.password
                        }
                        })
                        .then(res => {
                            if(res.data!=null&&res.data!=''){
                                this.$router.push('/')
                                this.$store.commit('loginFlagInit',false)
                                localStorage.setItem("user",res.data)
                                this.$store.commit("loginUserInit",res.data)
                            }else{
                                alert('账号或者密码不正确')
                            }               
                        })
                        .catch(err => {
                            console.error(err)
                        })
                }else{
                    alert('请检查账号和密码')
                }                
            })
        },        
        regsterAUrl(){
            this.activeName='second'
        },
    },
    components:{
        Register
    }
}
</script>

<style scoped>
    .colPassWord{
        text-align: left;
    }
    .colRegister{
        text-align: right;
    }
    .text_h2{
        margin: 0 auto;
        padding: 0 auto;
    }
    .left_text{
        text-align: left;
        margin-left: 100px;
    }
    .box-card {
        /* background-color: powderblue; */
        width: 80%;
        height: 660px;
        border: 1px solid black;
        margin: 0 auto;
        margin-top: 3%;
        border-radius: 10px
    }
    .login-page {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 105px auto;
        width: 350px;
        padding: 35px 35px 15px;
    }
</style>